<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <div class="hot van-ellipsis" v-if="show">
      <h2>热门搜索</h2>
      <div class="hotkey" style="display: flex">
        <a @click="hotserach(r)" href="##" v-for="(r, t) in hotlist" :key="t">
          {{ r }}
        </a>
      </div>
    </div>

    <div class="zhuanji" v-if="serachlist.length > 0">
      <h2>专辑</h2>
      <div
        class="detail"
        v-for="(l, i) in serachlist"
        :key="i"
        @click="godetail(l.id, l.albumId, l.followedNum)"
      >
        <div class="detial_left">
          <img :src="l.pic" alt="" />
        </div>
        <div class="detail_right">
          <h3 class="name" v-html="l.name"></h3>
          <p class="van-ellipsis">{{ l.desc }}</p>
          <p>主播：{{ l.comeFrom }}</p>
          <div>
            <span><van-icon name="service-o" />{{ l.listenNum }}</span>
            <span><van-icon name="completed" />{{ l.followedNum }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="zhuanji" v-if="serachlist.length > 0">
      <h2>节目</h2>
      <div class="detail" v-for="(q, e) in jiemulist" :key="e">
        <div class="detial_left">
          <img :src="q.pic" alt="" />
          <div class="play" @click="chang(q.albumId, q.dataReport)">
            <van-icon name="play-circle" size="30px" color="#fff" />
          </div>
        </div>
        <div class="detail_right">
          <h3 class="name van-ellipsis" v-html="q.name"></h3>
          <p class="van-ellipsis">{{ q.desc }}</p>
          <p>主播：{{ q.comeFrom }}</p>
          <div>
            <span><van-icon name="service-o" />{{ q.likedNum }}</span>
            <span><van-icon name="completed" />{{ q.listenNum }}</span>
          </div>
        </div>
      </div>
    </div>

    <myvideo :listenlist="listenlist" :flag="flag" :kid="kid"></myvideo>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: "",
      serachlist: [],
      num1: 0,
      num2: 1,
      id: 0,
      listenlist: [],
      flag: true,
      kid: 0,
      hotlist: [],
      show:true
    };
  },
  methods: {
    hotserach(value){
       this.$ajax
        .getsousuo({
          words: value,
          installid: 10001,
          appid: 0,
          operator: 2,
          suppermode: 0,
          devicetype: 1,
          devicename: "Unknown%20iPhone",
          lon: "114.422947",
          channel: "appstore",
          action: "95",
          pagesize: "20",
          resolution: "750*1624",
          pagenum: "1",
          version: "5.3.4",
          udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
          type: "day",
          usertype: 0,
          sign: "1b881e03776150f8f1d54e594cc8f6a0",
          mac: "020000000000",
          timestamp: "1609940599",
          sessionid: "EBB7384383AD467080A05507B24886F7",
          timezone: "28800",
          network: "1",
          osversion: "14.0.1",
          lat: "30.460457",
          idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
          page: "0",
          producer: "apple",
          screensize: "375*812",
          idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
        })
        .then((res) => {
          if (res.result.dataList.length > 0) {
            this.show=false
            this.serachlist = res.result.dataList[0].dataList;
            this.jiemulist = res.result.dataList[1].dataList;
          } else {
            Toast("暂时没有找到哦，搜搜别的吧~");
          }
        });



    }
    ,
    chang(value, name) {
      this.kid = value;
      this.songname = name;
    },

    godetail(value, value2, value3) {

        this.$router.push({
          name: "detail",
          query: { id: value, albumid: value2 },
        });

      console.log(value, value2, value3);
    },

    onSearch(val) {
      this.$ajax
        .getsousuo({
          words: val,
          installid: 10001,
          appid: 0,
          operator: 2,
          suppermode: 0,
          devicetype: 1,
          devicename: "Unknown%20iPhone",
          lon: "114.422947",
          channel: "appstore",
          action: "95",
          pagesize: "20",
          resolution: "750*1624",
          pagenum: "1",
          version: "5.3.4",
          udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
          type: "day",
          usertype: 0,
          sign: "1b881e03776150f8f1d54e594cc8f6a0",
          mac: "020000000000",
          timestamp: "1609940599",
          sessionid: "EBB7384383AD467080A05507B24886F7",
          timezone: "28800",
          network: "1",
          osversion: "14.0.1",
          lat: "30.460457",
          idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
          page: "0",
          producer: "apple",
          screensize: "375*812",
          idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
        })
        .then((res) => {
          if (res.result.dataList.length > 0) {
            this.serachlist = res.result.dataList[0].dataList;
            this.jiemulist = res.result.dataList[1].dataList;
          } else {
            Toast("暂时没有找到哦，搜搜别的吧~");
          }
        });
    },
    onCancel() {
      this.$router.push({ name: "listen" });
    },
  },
  mounted() {
      console.log(this.$route.query)
      if(this.$route.query.length>0){
        this.$ajax
        .getsousuo({
          words: this.$route.query,
          installid: 10001,
          appid: 0,
          operator: 2,
          suppermode: 0,
          devicetype: 1,
          devicename: "Unknown%20iPhone",
          lon: "114.422947",
          channel: "appstore",
          action: "95",
          pagesize: "20",
          resolution: "750*1624",
          pagenum: "1",
          version: "5.3.4",
          udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
          type: "day",
          usertype: 0,
          sign: "1b881e03776150f8f1d54e594cc8f6a0",
          mac: "020000000000",
          timestamp: "1609940599",
          sessionid: "EBB7384383AD467080A05507B24886F7",
          timezone: "28800",
          network: "1",
          osversion: "14.0.1",
          lat: "30.460457",
          idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
          page: "0",
          producer: "apple",
          screensize: "375*812",
          idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
        })
        .then((res) => {
          if (res.result.dataList.length > 0) {
            this.serachlist = res.result.dataList[0].dataList;
            this.jiemulist = res.result.dataList[1].dataList;
          } else {
            Toast("暂时没有找到哦，搜搜别的吧~");
          }
        });
      }else{
          this.$ajax
      .gettuijian({
        //推荐列表
        installid: 10001,
        appid: 0,
        operator: 2,
        suppermode: 0,
        devicetype: 1,
        devicename: "Unknown%20iPhone",
        lon: "114.422947",
        channel: "appstore",
        action: "95",
        pagesize: "20",
        resolution: "750*1624",
        pagenum: "1",
        version: "5.3.4",
        udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
        type: "day",
        usertype: 0,
        sign: "1b881e03776150f8f1d54e594cc8f6a0",
        mac: "020000000000",
        timestamp: "1609940599",
        sessionid: "EBB7384383AD467080A05507B24886F7",
        timezone: "28800",
        network: "1",
        osversion: "14.0.1",
        lat: "30.460457",
        idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
        page: "0",
        producer: "apple",
        screensize: "375*812",
        idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
      })
      .then((res) => {
        this.listenlist = res.result.dataList[0];
        console.log(this.listenlist + "进入页面读取");
      });

    this.$ajax
      .getkey({
        //获取热门搜索
        installid: "0004ddrL",
        appid: "0",
        operator: "2",
        version: "5.3.4",
        udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
        sign: "1b881e03776150f8f1d54e594cc8f6a0",
        suppermode: "0",
        devicetype: "1",
        usertype: "0",
        mac: "020000000000",
        timestamp: "1609900766",
        sessionid: "391E433215AE420088931499ACA95134",
        idfv: "416DBEDF-8F90-44A8-BC8B-586F2F9036CD",
        producer: "apple",
        idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
        screensize: "375*812",
        likeCountDependOnServer: "1",
        pageid: "109",
        page: "200014",
        lat: "30.460388",
        osversion: "14.0.1",
      })
      .then((res) => {
        this.hotlist = res.result.dataList;
      });
      }




  },
};
</script>

<style scoped lang="scss">
.zhuanji {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  h2 {
    font-size: 16px;
    font-weight: 800;
    line-height: 20px;
  }
}
.detail {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  .detial_left {
    width: 90px;
    height: 85px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      border: 1px solid #999;
      border-radius: 6px;
    }
  }
  .detail_right {
    width: 70%;
    margin-left: 5%;
    .name {
      line-height: 26px;
    }
    p {
      color: rgb(157, 157, 157);
      line-height: 22px;
    }
    span {
      color: rgb(157, 157, 157);
      line-height: 22px;
      margin-right: 10%;
    }
  }

  .play {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
em {
  font-style: normal;
  color: rgb(249, 78, 78);
}

.hot {
  padding: 20px;

  h2 {
    font-size: 16px;
    line-height: 10px;
  }
  a {
    margin-top: 10px;
    margin-right: 5%;
    padding: 2px 6px;
    color: rgb(249, 78, 78);
    border-radius: 10px;
    border: 1px solid rgb(249, 78, 78);
  }
  .hotkey{
    flex-wrap: wrap;
  }
}
</style>